<template>
  <div class="con">
    <!-- 充值提现 -->
    <div class="contbox6_10">
      <p class="titlelist6_10">
        活动管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>活动统计
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="formInline" label-width="100px">
            <el-form-item label="归属OEM">
              <el-input
                v-model="formInline.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动类型">
              <el-select
                class="appointVip"
                v-model="formInline.activeType"
                placeholder="请选择活动类型"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="排名奖励活动" value="5"></el-option>
                <el-option label="伙伴拉新活动" value="6"></el-option>
                <el-option label="商户拉新活动" value="7"></el-option>
                <el-option label="开通奖励活动" value="9"></el-option>
                <el-option label="定时达标活动" value="10"></el-option>
                <el-option label="次月达标活动" value="11"></el-option>
                <el-option label="周期达标活动" value="12"></el-option>
                <el-option label="单品返现活动" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input v-model="formInline.activeName" placeholder="请输入活动名称"></el-input>
            </el-form-item>
            <el-form-item label="活动状态">
              <el-select
                v-model="formInline.activeStatus"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="已上线" value="1"></el-option>
                <el-option label="已过期" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="奖励方式">
              <el-select
                v-model="formInline.settleType"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" value=""></el-option>
                <el-option label="实时结算" value="0"></el-option>
                <el-option label="活动完成统一结算" value="1"></el-option>
                <el-option label="日结" value="2"></el-option>
                <el-option label="月结" value="3"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="品牌名称">
              <el-select
                v-model="formInline.channelUid"
                placeholder="请选择品牌名称"
              >
             
                <el-option
                  v-for="item in paizis"
                  :label="item.channelName"
                  :value="item.uid"
                  :key="item.uid"
                ></el-option
              ></el-select>
            </el-form-item>
            <el-form-item label="考核时间">
              <el-date-picker
                v-model="dataTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="奖励时间">
              <el-date-picker
                v-model="dataTimes"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <!-- <el-form-item class="search"> -->
            <!-- </el-form-item> -->
          </el-form>
        </div>
        <div class="buttons">
          <el-button
                v-if="isAuth('activityStatisticsSearch')"
                type="primary"
                @click="queryPayActiveLists"
                >搜索</el-button
              >
               <el-button v-if="isAuth('activityStatisticsReset')" type="" @click="reset">重置</el-button>
                <el-button type="primary" v-if="totalNum>0" style="margin-left:40px" @click="payActiveListExport" class="butt"
          >批量导出</el-button
        >
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
           @selection-change="handleSelectionChange"
            :row-style="{height:'0px'}"
            :cell-style="{padding:'0px'}"
            v-loading="listLoading"
          >
            <el-table-column
              type="selection"
              min-width="30"
            ></el-table-column>
            <el-table-column
              prop="oemName"
              show-overflow-tooltip
              min-width="150"
              label="归属OEM"
            ></el-table-column>
            <el-table-column
              prop="activeType"
              show-overflow-tooltip
              min-width="120"
              label="活动类型"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.activeType == 5">排名奖励活动</span>
                <span v-if="scope.row.activeType == 6">伙伴拉新活动 </span>
                <span v-if="scope.row.activeType == 7">商户拉新活动</span>
                <span v-if="scope.row.activeType == 9">开通奖励活动</span>
                <span v-if="scope.row.activeType == 10">定时达标活</span>
                <span v-if="scope.row.activeType == 11">次月达标活动</span>
                <span v-if="scope.row.activeType == 12">周期达标活动</span>
                <span v-if="scope.row.activeType == 3">单品返现活动</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="activeName"
              min-width="200"
              label="活动名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="channelName"
              min-width="200"
              label="品牌名称"
              show-overflow-tooltip
            ></el-table-column>
             <el-table-column show-overflow-tooltip min-width="140" label="奖励方式">
              <template slot-scope="scope">
                <span v-if="scope.row.settleType == 0">实时结算</span>
                <span v-if="scope.row.settleType == 1">活动完成统一结算</span>
                <span v-if="scope.row.settleType == 2">日结</span>
                <span v-if="scope.row.settleType == 3">月结</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="officeNum"
              min-width="80"
              show-overflow-tooltip
              label="奖励机构数量"
            ></el-table-column>
            <el-table-column
            show-overflow-tooltip
              prop="allRewardAmt"
              min-width="80"
              label="全部奖励金额"
            ></el-table-column>
            <el-table-column
              prop="settledRewardAmt"
              min-width="90"
              show-overflow-tooltip
              label="已奖励金额"
            ></el-table-column>
            <el-table-column
            show-overflow-tooltip
              prop=""
              min-width="180"
              label="考核时间"
            ><template slot-scope="scope">
                {{ scope.row.activeStartDate }} - {{ scope.row.activeEndDate }}
              </template>
              
            </el-table-column>
            <el-table-column
              prop="activeStatus"
              min-width="80"
              label="活动状态"
            >
            </el-table-column>
            <el-table-column min-width="100" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  v-if="isAuth('activityStatisticDetail')"
                  @click="details(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
       
        <el-pagination
          background
          style="text-align: right; padding:0 20px;"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>

    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import axios from 'axios'
import qs from "qs";
import Tree from "../tree/index"
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  data() {
    return {
      httpurl:"http://10.12.204.208:10688/",
      shelvesId: "",
      titles: "",
      mechanism:null,
        showType:false,
      shelves: {},
      dialogVisible: false,
      NameList: [],
      optionsBrandTypeNum:[],
      BrandTypeList: [],
      productListData: [],
      listDetailsShow: false,
      addInventoryShow: false,
      recordsShow: false,
      channelUid: "",
      listLoading: false,
      Sid: "",
      jurisdiction: "",
      formInline: {
        
        settleType:"",
        oemUid:localStorage.getItem('uid'),
        activeStatus:"",
        idList:[],
        activeType:"",
        status: "",
        startDate: "",
        endDate: "",
        upCntCtl:"",
        page: 1,
        number: 20,
        BrandType: "",
        channelUid: "",
        productUid: "",
        productCode: "",
        // oemUid: localStorage.getItem('uid'),
        officeUid: "", //机构ID
        organizationName: "", //机构名
      },
      dataTime: [],
      dataTimes: [],
      eventShow: false,
      machinesShow: false,
      dialogVisible: false,
      totalNum: 0, //总页数
      form: {},
      tableData: [],
      activityType: 1,
      activeUid: "",
      from: false,
      SelectData:[]
    };
  },
  components: {
    Tree
  },
  created(){
    var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/brand/queryChannelNameList",
          data: {
            oemUid: localStorage.getItem("uid")
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.paizis = d.data.data;
            console.log(_this.paizis)
            /*  _this.form.toOfficeUid = d.data.oemuid;*/
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    this.queryPayActiveList()
  },
  mounted() {
    // this.queryChannelNameList();
    // this.queryPayActiveList();  //展示列表
    this.jurisdiction = localStorage.getItem("jurisdiction");   //权限字段获取
  },
  methods: {
    // 列表选中
    handleSelectionChange(val) {
      this.SelectData = val;
      
    },
    // 点击查看
    details(val){
      //排名
        if(val.activeType=="5"){
          this.name="排名活动"
        }else if(val.activeType=="6"){
          this.name="伙伴拉新活动"
        }
        else if(val.activeType=="7"){
          this.name="商户拉新活动"
        }
        else if(val.activeType=="9"){
          this.name="开通奖励活动"
        }
        else if(val.activeType=="10"){
          this.name="定时达标活动"
        }
        else if(val.activeType=="11"){
          this.name="次月达标活动"
        }
        else if(val.activeType=="12"){
          this.name="周期达标活动"
        }
        else if(val.activeType=="3"){
          this.name="单品返现活动"
        }
        this.$router.push({
          path: "rank",
          query: {
            activeUid: val.activeUid,
            name:this.name
          },
        })
    },
         //这里开始
    transmit(data){
      console.log(data.uid)
      //归属机构的uid
      this.form.officeUid = data.uid;
      console.log(this.form.officeUid)
      //归属机构名字
      this.mechanism = data.name
      this.formInline.officeUid = data.uid
      // alert(this.formInline.officeUid)
    },
    //设置取消的
    determine(){
      // alert("执行")
      this.showType=false
    },
    queryPayActiveLists(){
      this.formInline.page=1
      this.queryPayActiveList()
    },
    queryPayActiveList(){
       if (this.dataTime === null) this.dataTime = []
        this.formInline.activeStartDate = this.dataTime[0]
        this.formInline.activeEndDate = this.dataTime[1]
        if (this.dataTimes === null) this.dataTimes = []
        this.formInline.rewardStartDate = this.dataTimes[0]
        this.formInline.rewardEndDate = this.dataTimes[1]
      axios.post('/api/active/allActiveCount',this.formInline).then(res=>{
        if(res.data.code=="0000"){
          console.log(res)
          this.tableData=res.data.data
          this.totalNum=res.data.total
        }
      })
    },
    selectInstitution(){
      this.showType=true
    },
    // 重置
    reset(){
      this.formInline.channelUid=""
      this.formInline.page=1
      this.formInline.settleType= ""
      this.formInline.activeStatus= ""
      this.formInline.activeName=""
      this.formInline.activeEndDate= ""
      this.formInline.activeStartDate= ""
      this.formInline.rewardStartDate= ""
      this.formInline.rewardEndDate= ""
      this.formInline.activeType= ""
      this.formInline.channelName=""
      this.formInline.oemName=""
      this.formInline.channelUid=""
      this.formInline.productUid=""
      this.formInline.officeUid=""
      this.mechanism=""
      this.dataTime=[]
      this.dataTimes=[]
      this.formInline.organizationName = ""
      this.queryPayActiveList()
    },
    logout(){
       this.$router.push({
        path: "createActive",
      });
    },
    teamReward(){
        this.$router.push({
            path: "teamRewardfrind",
        });
    },
    activityFrinds(){
        this.$router.push({
        path: "frindsestablish",
        name: "frindsestablish",
        query: { type: "3" ,user:"0"}
      });
    },
    // 启用停用按钮切换
    updateStatus(uid, status) {
      let title;
      if (status == "1") {
        title = "停用后,此商品不在APP展示，用户无法购买";
      } else {
        title = "启用后,此商品将重新展示在APP中，用户可见可购买";
      }
      this.$confirm(title, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: "warning",
      }).then(() => {
        this.changeStatusInterface(uid, status);
      });
    },

    //启用停用操作调用接口
    changeStatusInterface(uid, status) {
      let pl = {
        uid: uid,
        status: status,
      };
      https.updateStatus(pl).then((res) => {
        if (res.data.code !== "0000") {
          // this.$notify({ title: "错误", message: res.data.msg, type: "error" });
          
          return layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });;
        }
        this.queryPayActiveList();
        // this.$notify({ title: "成功", message: res.data.msg, type: "success" });
        layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2,
          });
      });
    },
    //批量导出
    payActiveListExport() {
      if(this.SelectData.length>0){
        for (let i = 0; i < this.SelectData.length; i++) {
        //  let pl = { snUid: +this.SelectData[i].id };
          this.formInline.idList.push(this.SelectData[i].activeUid);
        }
      }else{
        this.formInline.idList=[]
      }
      var _this = this;
      exportFile("/api/active/allActiveCount/excel/export",_this.formInline,"活动统计")
      // _this
      //   .axios({
      //     //axios请求
      //     method: "post",
      //     url: "/api/active/allActiveCount/excel/export",
      //     responseType: "blob",
      //     data: _this.formInline
      //   })
      //   .then(function(d) {
      //     let blob = new Blob([d.data], { type: "application/vnd.ms-excel" });
      //     /*let objectUrl = URL.createObjectURL(blob);
      //                   window.location.href = objectUrl;*/

      //     var date = new Date();

      //     var year = date.getFullYear();

      //     var month = date.getMonth() + 1;
      //     var day = date.getDate();
      //     var hour = date.getHours();
      //     var minute = date.getMinutes();
      //     var second = date.getSeconds();
      //     date =
      //       year +
      //       "" +
      //       month +
      //       "" +
      //       day +
      //       "" +
      //       hour +
      //       "" +
      //       minute +
      //       "" +
      //       second; //'+date+'

      //     var downloadElement = document.createElement("a");
      //     var href = window.URL.createObjectURL(blob); //创建下载的链接
      //     downloadElement.href = href;
      //     downloadElement.download = "活动统计" + date + ".xls"; //下载后文件名
      //     document.body.appendChild(downloadElement);
      //     downloadElement.click(); //点击下载
      //     document.body.removeChild(downloadElement); //下载完成移除元素
      //     window.URL.revokeObjectURL(href); //释放掉blob对象
      //   })
      //   .catch(function(error) {
      //     //axios请求失败回调
      //     console.log(error);
      //   });
    },

    //分页 每页多少条数据
    handleSizeChange(val) {
      this.SelectData=[]
      this.formInline.number = val; //动态改变
      this.formInline.page = 1;
      this.queryPayActiveList();
    },
    handleSizeChanges(){
      this.SelectData=[]
      this.formInline.page = 1; //动态改变
      this.queryPayActiveList();
    },
    //分页 当前页
    handleCurrentChange(val) {
      this.SelectData=[]
      this.formInline.page = val; //动态改变
      this.queryPayActiveList();
    },
  },
};
</script>

<style scoped>
.con {
  position: relative;
}
.el-main {
  padding: 0 !important;
}
.elP {
  width: 100%;
  margin: 20px 0;
  font-size: 15px;
  font-weight: 500;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  min-height: 30px;
  display: block;
  float: left;
  /* border-bottom: 1px solid #ccc; */
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.el-dropdown>.el-button{
    padding: 7px 20px
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  color: #409EFF;
  border-color: #409EFF
}
.btn {
  float: right;
}

.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.text {
  color: #999;
}
.search {
  float: right !important;
  /* height: 0px !important; */
  margin-top: 0px !important;
}
.table {
  margin-top: 20px;
}

.top {
  padding-bottom: 20px;
}
/deep/ .el-dialog {
  padding-bottom: 20px;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
   height: 32px;
}
</style>
